import { getUserAppletDetail, marketPublish, marketWithdraw, modUserApplet } from "@/api/modules/applet/userApplet";
import Navigation from "@/components/Frame/Navigation";
import PageHeader from "@/components/Frame/PageHeader";
import mittBus from "@/utils/mittBus";
import { showTips, confirm } from "@/utils/util";
import { useRoute } from "vue-router";
import BasicDetail from "./basicDetail";
import ConfigDetail from "./configDetail";
import DeployDetail from "./deployDetail";
import BasicDialog from "./detailDialog";
import { ComponentInternalInstance, getCurrentInstance } from "vue";

export default defineComponent({
	name: "AppletDetail",
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const route = useRoute();
		const state = reactive<any>({ appId: route.query.id as string, basicDetail: {} });
		onMounted(async () => {
			init();
		});
		const init = async () => {
			let { result } = await getUserAppletDetail({ id: state.appId });
			state.basicDetail = result;
		};
		const navList = reactive([
			{ label: proxy?.$t("appletdetail.navlist.basic"), value: "basic" },
			{ label: proxy?.$t("appletdetail.navlist.config"), value: "config" },
			{ label: proxy?.$t("appletdetail.navlist.deploy"), value: "deploy" }
		]);
		const active = ref<string>("config");
		const changeView = (info: { label: string; value: string }) => {
			active.value = info.value;
		};
		const detailDialog = reactive<any>({
			title: proxy?.$t("appletdetail.dialog_title.mod"),
			visible: false
		});
		const submit = async () => {
			let res = await modUserApplet({ ...state.basicDetail });
			let ok = showTips(res.code, proxy?.$t("appletdetail.tips.mod"), res.message);
			if (ok) {
				detailDialog.visible = false;
				init();
			}
		};
		const refresh = () => {
			mittBus.emit("refreshAppletDetail");
		};
		const publish = async () => {
			confirm({ content: proxy?.$t("appletdetail.confirm.publish") }).then(async (flag: any) => {
				if (!flag) {
					return;
				}
				const { code, message } = await marketPublish({ appId: state.basicDetail.id });
				let ok = showTips(code, proxy?.$t("appletdetail.tips.release"), message);
				if (ok) {
					init();
				}
			});
		};
		const withdraw = async () => {
			confirm({ content: proxy?.$t("appletdetail.confirm.withdraw") }).then(async (flag: any) => {
				if (!flag) {
					return;
				}
				const { code, message } = await marketWithdraw({ appId: state.basicDetail.id });
				let ok = showTips(code, proxy?.$t("appletdetail.tips.offshelf"), message);
				if (ok) {
					init();
				}
			});
		};
		//网关scheme：设备参数配置模型
		return () => {
			return (
				<div>
					<BasicDialog
						width="800px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={state.basicDetail}
						onSubmit={submit}
					></BasicDialog>
					<PageHeader
						showBackText={false}
						v-slots={{
							operate: () => {
								return state.basicDetail.marketPublish == "no" ? (
									<el-link
										type="primary"
										class="ml-4 iconfont iconbx-paper-plane"
										style="width:110px"
										onClick={publish}
										disabled={state.basicDetail.source != "develop"}
									>
										{proxy?.$t("appletdetail.link.publish")}
									</el-link>
								) : (
									<el-link
										type="danger"
										class="ml-4 iconfont iconbx-reset"
										style="width:120px"
										onClick={withdraw}
										disabled={state.basicDetail.source != "develop"}
									>
										{proxy?.$t("appletdetail.link.withdraw")}
									</el-link>
								);
							}
						}}
					>
						<span>{state.basicDetail.name}</span>
						<el-link
							class="iconfont iconbx-sync ml-4"
							type="primary"
							onClick={() => {
								refresh();
								init();
							}}
						>
							{proxy?.$t("common.btn.refresh")}
						</el-link>
					</PageHeader>
					<Navigation navList={navList} onChange={changeView} active={active.value} showToggle={false} />
					<el-scrollbar class="bg-white" style="height:calc(100vh - 221px)">
						{active.value == "basic" && <BasicDetail detail={state.basicDetail} onChange={submit} />}
						{active.value == "config" && <ConfigDetail detail={state.basicDetail} onChange={submit} onRefresh={init} />}
						{active.value == "deploy" && <DeployDetail detail={state.basicDetail} onChange={submit} />}
					</el-scrollbar>
				</div>
			);
		};
	}
});
